<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
        // window.onload=function(){
        //     console.log(0)
        // }
        // 文档准备就绪
        // $(document).ready(function(){

        // })
        // $().ready(function(){

        // })
        // $(function(){

        // })
        //对象 js转换为jq
        // $(js对象/dom)=> jq对象
        // $(div)=>jq
        //$("<LI>列表</li>")=>js 
        // jquery=>js
        // [0]
        // jq[0]=>js
        // $(div)[0]=>js 
         $(function(){
             //var div =document.queryselector(".div")
             //div.onclick =function(){

            //  }
            // var $div=$(".div")
            // $div.click(function(){

            // })
                // $("li:eq(2)").css("color","red")
                // $("li *:eq(2)").css("color","red")li 子元素所有第二个
                //索引为2
                // $("li:gt(2)").css("color","blue")
                //大于2
                // $("li:li(2)").css("color","green")
                //小于2

                // $("li:empty").css("color","red")
                // $("li:parent").css("color","red")
                $("li:has(span)").css("color","blue")
                $("li:has(.span)").css("color","red")
                //  选择器
                // :contains(123) 包含文本 选出来
                //文本
        })

    </script>
<body>
    <div class="div">

    </div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5
            <span class="span">444</span>
        </li>
        <li>
            <span>999</span>
        </li>
    </ul>
</body>
</html>